<template>
  <div class="big-cart">
    <common-head title="购物车" :rightText="rightText" @clickRight="clickRight"></common-head>
    <div class="main">
      <div class="main-top" v-show="!checkLogin()">
        <van-panel title="登录后提交订单" desc="新人满99-98">
          <div slot="footer">
            <van-button class="log" size="small" color="#07c160" round type="info" to="/login">登录</van-button>
            <van-button size="small" round type="info" to="/reg">注册</van-button>
          </div>
        </van-panel>
      </div>
      <div class="main-content">
        <div class="card" v-for="(item,index) in carts.lists" :key="item.id">
          <!-- 选择按钮 -->
          <div class="check">
            <van-checkbox v-model="item.isChecked" checked-color="#07c160" @click="singleCheck" />
          </div>
          <div class="card-content">
            <van-card
              :num="item.itemNum"
              :price="item.minPrice"
              :title="item.name"
              :desc="item.recommendStatusStr"
              :thumb="item.pic"
              @click="$router.push({path:`/detail/${item.id}`})"
            ></van-card>
            <div class="step">
              <van-stepper v-model="item.itemNum" @change="countChange" />
            </div>
          </div>
        </div>
      </div>

      <!-- 提交至订单 -->
      <div class="cart-foot">
        <van-submit-bar :price="carts.total*100" button-text="结算" @submit="submit">
          <div slot="tip" style="text-align:right" v-show="delShow">
            <van-button icon="delete" type="primary" size="small" @click="del" class="checkDel">删除选中</van-button>
          </div>
          <van-checkbox v-model="carts.isAllChecked" @click="allChecked" checked-color="#07c160">全选</van-checkbox>
        </van-submit-bar>
      </div>

      <h4 v-show="!carts.lists.length" class="no">
        <van-icon name="cart-circle-o" />
        <p>无病一身轻~</p>
      </h4>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import CommonHead from "components/CommonHead";
import { checkLogin } from "utils";

export default {
  data() {
    return {
      rightText: "管理",
      delShow: false
    };
  },
  mounted() {
    this.calc_total();
  },
  methods: {
    submit() {
      // 判断是否登录
      if (this.checkLogin()) {
        // 将当前的 已经选中的商品和价格总价 传到 订单中
        // 刷选  将选中的商品刷选出来
        let checkedItems = this.carts.lists.filter(el => el.isChecked);
        let order = {}; //订单
        order.itemLists = checkedItems;
        order.orderState = 0; //状态是待支付
        order.total = this.carts.total; //总价格
        this.addOrder(order); //将订单添加到vuex state中
        this.$router.push("/order");
      } else {
        let _this = this;
        this.$toast.loading({
          message: "未登录,正在跳转至登录界面...",
          forbidClick: true,
          duration:1000,
          onClose() {
            _this.$router.push("/login");
          }
        });
      }
    },
    checkLogin,
    allChecked() {
      if (!this.carts.isAllChecked) {
        this.carts.lists.map(el => {
          el.isChecked = true;
        });
      } else {
        this.carts.lists.map(el => {
          el.isChecked = false;
        });
      }
      this.addCart(this.carts.lists);
      this.calc_total();
    },

    del() {
      // 删除商品
      this.$dialog
        .confirm({
          title: "删除商品",
          message: "您确定要从购物车删除该商品吗？"
        })
        .then(() => {
          var arr = this.carts.lists.filter(el => !el.isChecked);
          this.addCart(arr);
          this.calc_total();
        })
        .catch(() => {
          this.$toast("取消");
        });
    },
    singleCheck() {
      // 商品选中和取消选中
      let isAllChecked = true;
      this.carts.lists.map(el => {
        if (!el.isChecked) {
          isAllChecked = false;
        }
      });
      if (isAllChecked) {
        this.carts.isAllChecked = true;
      } else {
        this.carts.isAllChecked = false;
      }
      this.addCart(this.carts.lists);
      this.calc_total();
    },
    countChange(val) {
      // 点击步进器 改变 商品的件数
      this.addCart(this.carts.lists);
      this.calc_total();
    },
    clickRight() {
      this.delShow = !this.delShow;
      if (this.delShow) {
        this.rightText = "完成";
      } else {
        this.rightText = "管理";
      }
    },
    ...mapActions(["calc_total", "count_change"]),
    ...mapMutations(["addCart", "addOrder"])
  },
  computed: {
    ...mapState(["carts"])
  },
  components: {
    CommonHead
  }
};
</script>

<style lang="less" scoped>
.big-cart {
  padding-bottom: 96px;
  .main {
    padding-top: 65px;
    padding-bottom: 1px;
    background: #e3e3e3;

    &-top {
      text-align: center;
      background: #fff;
      .van-cell__title {
        .van-cell__label {
          color: #f30;
        }
        span {
          display: inline-block;
          font: 400 16px/30px "微软雅黑";
          padding: 0 50px;
          border-radius: 10px;
          background: #1ed89a;
          color: #fff;
        }
      }
      .log {
        margin-right: 20px;
      }
    }
    &-content {
      background: #f1f1f1;
      margin-top: 5px;
      border-radius: 5px 5px 0 0;
      box-sizing: border-box;
      .card {
        display: flex;
        align-items: center;
        justify-content: space-start;
        padding: 10px 10px;
        margin-bottom: 6px;
        background: #fff;
        .card-content {
          width: calc(100% - 20px);
          .van-card {
            background: #fff;
            .van-card__desc {
              margin-left: 10px;
            }
            .van-card__title {
              margin-top: 10px;
              margin-left: 10px;
            }
            .van-card__price {
              color: #f30;
              margin-left: 10px;
              font-size: 16px;
            }
          }
        }
      }
    }
    .van-submit-bar {
      bottom: 0px;
      .van-checkbox {
        margin-left: 10px;
      }
      &__price {
        color: #f30;
      }
      &__button {
        margin-left: 20px;
        width: 144px;
        background: #ff4000;
      }
    }
  }
  .checkDel {
    font-size: 14px;
    letter-spacing: 2px;
  }
  .no {
    text-align: center;
    /deep/.van-icon {
      font-size: 60px !important;
      color: rgb(131, 121, 121);
      margin-top: 20px;
    }
    p {
      font: bold 20px/50px "微软雅黑";
      color: rgb(131, 121, 121);
      margin-bottom: 20px;
    }
  }
  .step {
    .van-stepper {
      text-align: right;
    }
  }
}
</style>